<template>
	<view class="container">
		<bnn-loading :loading="state === 0" />
		<view v-if="state !== 2 && state !== 3 && state !== 7 && state !== 8 && state !== 9">
			<view class="tool-list">
				<view class="tool-item f-cc" @click="onClickItem(item)" v-for="item in toolList" v-show="item.show">
					<image :src="item.icon" class="item-img" />
					<view class="tool-title">{{item.title}}</view>
				</view>
			</view>
			<view class="tool-tips f-cc"><span>以上所有操作立即生效</span></view>
			<view class="route-list">
				<view class="route-item" @click="onClickItem(item)" v-for="item in routeList">
					<view class="item-left">
						<!-- <view class="left-icon slw-icon"></view> -->
						<view class="left-name">{{item.leftName}}</view>
					</view>
					<view class="item-right">
						<view class="right-name">{{item.rightName}}</view>
						<view class="right-icon slw-icon" v-if="item.click">&#xe733;</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="state === 2 || state === 9" class="apply-box" :style="'background-image:url('+bacImg+')'">
			<image class="apply-img" src="@/static/images/automatedTrading/apply.jpg" />
			<view class="apply-btn" @click="toApply()">点击申请</view>
		</view>
		<view v-if="state === 3" class="wait-tips">
			<view>后台审核中</view>
			<view>请等待</view>
			<view>......</view>
		</view>
		<view class="freeze-tips" v-if="state === 6">
			<view>您的自动化交易功能已被冻结</view>
			<view>请联系您的专属客服</view>
			<view>冻结原因：{{freeze}}</view>
		</view>
		<view v-if="state === 7" class="wait-tips">
			<view>审核未通过</view>
			<view>......</view>
			<view class="apply-btn" v-if="state === 7" @click="toApply()">重新申请</view>
		</view>
		<view v-if="state === 8" class="confirm-tips">
			<div class="confirm-tips-label">
				<div>恭喜你！</div>
				<p>已审核通过</p>
				<label>请点击下一步，完成支付后开启功能。</label>
			</div>
			<image :src="passImg" class="confirm-tips-img" />
			<div class="confirm-tips-btn" @click="renewStrategy">下一步</div>
		</view>
		<view class="expire-time" v-if="state !== 2 && state !== 3 && state !== 7 && state !== 8 && state !== 9">
			到期时间：{{expireTime}}</view>
	</view>
</template>

<script>
	import icon1 from '@/static/images/automatedTrading/open.png'
	import icon2 from '@/static/images/automatedTrading/close.png'
	import icon3 from '@/static/images/automatedTrading/refresh.png'
	import icon4 from '@/static/images/automatedTrading/xufei.png'
	import icon5 from '@/static/images/automatedTrading/view.png'
	import bacImg from '@/static/images/automatedTrading/apply_bac.jpg'
	import passImg from '@/static/images/automatedTrading/pass_audit.png'
	import BnnLoading from '@/components/bnn-ui/loading/index.vue'
	import {
		getAutomatedTradingStatus,
		changeAutoStatus,
		getAccountDetail
	} from '@/api/member.js'

	export default {
		components: {
			BnnLoading
		},
		data() {
			return {
				state: 0, //0.初始化, 1.正常状态, 2.待申请 3.待审核 4.过期 5.手动关闭 6.冻结 7.审核未通过 8.审核通过待支付开通功能 9.审核被拒拉黑
				loading: false,
				msg: [
					'您的服务已过期，请续签服务',
					'您的服务已冻结，请联系客服',
					'您账户未成功登陆，请稍后查询',
					'停止策略跟投，您账户已有的持仓不能跟投策略平仓，确认停止跟投吗？',
					'很抱歉，您暂未获得申请该服务的资格！'
				],
				expireTime: '',
				freeze: '',
				bacImg: bacImg,
				passImg: passImg,
				toolList: [{
						icon: icon1,
						title: '点击关闭',
						show: true,
						click: this.closeStrategy
					},
					{
						icon: icon2,
						title: '点击开启',
						show: false,
						click: this.openStrategy
					},
					{
						icon: icon5,
						title: '查看策略',
						show: true,
						click: this.viewStrategy
					},
					{
						icon: icon3,
						title: '更换策略',
						show: true,
						click: this.changeStrategy
					},
					{
						icon: icon4,
						title: '续签服务',
						show: true,
						click: this.renewStrategy
					}
				],
				routeList: [{
						name: 'type',
						leftName: '自动化功能',
						click: null,
						rightName: ''
					},
					{
						name: 'broker_name',
						leftName: '期货公司',
						click: null,
						rightName: ''
					},
					{
						name: 'account',
						leftName: '期货账户',
						click: null,
						rightName: ''
					},
					{
						name: 'login_status',
						leftName: '账户状态',
						click: null,
						rightName: ''
					},
					{
						name: 'account_detail',
						leftName: '账户详情',
						click: this.toAccountDetail,
						rightName: ''
					}
				],
				timer: null
			}
		},
		onShow() {
			this.state = 0
			this.init()
			this.getAccountData()
			this.timer = setInterval(() => {
				this.getAccountData()
			}, 10000)
		},
		onHide() {
			clearInterval(this.timer)
			this.timer = null
		},
		destroyed() {
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			// 页面初始化
			init: function() {
				if (!this.loading) {
					this.loading = true
					getAutomatedTradingStatus().then(res => {
						this.loading = false
						if (res.code === 200) {
							let {
								type,
								data
							} = res.data;
							this.state = type || 0
							// 过期时间
							if (data && data.expire_date) {
								this.expireTime = data.expire_date
							}
							// 功能关闭
							let clock = true
							let statusName = '已开启'
							if (type === 4 || type === 5 || type === 6) {
								clock = false
							}
							this.routeList[0].rightName = clock ? '已开启' : '已关闭'
							this.toolList[0].show = clock
							this.toolList[1].show = !clock
							// 功能冻结
							if (type === 6) {
								this.freeze = data.freeze_remark
							}
						}
					}).catch(err => {
						this.prompt(err.message)
						setTimeout(() => {
							this.loading = false
							uni.navigateBack()
						}, 1500)
					})
				}
			},
			// 查询账户资料
			getAccountData: function() {
				// 请求账户信息
				getAccountDetail().then(res => {
					if (res.code === 200) {
						let data = res.data
						Object.keys(data).map(key => {
							this.routeList.map((item, index) => {
								if (item.name === key) {
									this.routeList[index].rightName = data[key]
									if (item.name === 'login_status') {
										// 账户异常
										if (data[key] === 'CTP:不合法的登录') {
											this.routeList[index].click = this.accountChange
											this.routeList.filter(item => item.name === 'account_detail')[0].click = this.toDetailError
										} else if (data[key] === 'CTP:首次登录必须修改密码，请修改密码后重新登录') {
											uni.showModal({
											    title: '账户状态',
											    content: '首次登录必须修改密码，请修改密码后重新登录',
											    success: function (res) {
											        if (res.confirm) {
														uni.navigateTo({
															url: 'reset-bound/index'
														})
											        } else if (res.cancel) {
											            console.log('用户点击取消');
											        }
											    }
											});
											this.routeList[index].click = this.accountChange
											this.routeList.filter(item => item.name === 'account_detail')[0].click = this.toDetailError
										} else {
											this.routeList[index].click = null
											this.routeList.filter(item => item.name === 'account_detail')[0].click = this.toAccountDetail
										}
									}
								}
								// 需要重新绑定账户信息  修改绑定 
								if (item.name === 'login_status' && key === 'edit' && data[key] === 1) {
									this.routeList[index].click = this.resetPsw
									this.routeList[index].rightName = '修改绑定'
									this.routeList.filter(item => item.name === 'account_detail')[0].click = this.toDetailError
								}
								// 需要重新绑定账户信息   修改密码
								if(item.name === 'login_status' && key === 'edit_pwd' && data[key] === 1){
									this.routeList[index].click = this.accountChange
									this.routeList[index].rightName = '修改密码'
									this.routeList.filter(item => item.name === 'account_detail')[0].click = this.toDetailError
								}
							})
						})
					}
				})
			},
			// 账户变更
			accountChange: function() {
				if (this.getAuthority()) return
				uni.navigateTo({
					url: 'reset-bound/index?type=2'
				})
			},
			// 重置密码
			resetPsw: function() {
				if (this.getAuthority()) return
				uni.navigateTo({
					url: 'reset-bound/index'
				})
			},
			// 去账户详情
			toAccountDetail: function() {
				if (this.getAuthority()) return
				uni.navigateTo({
					url: 'account/index'
				})
			},
			// 账户详情异常
			toDetailError: function() {
				if (this.getAuthority()) return
				this.prompt(this.msg[2], 1)
			},
			// 点击功能入口
			onClickItem: function(item) {
				if (!this.loading && item.click) {
					item.click()
				}
			},
			// 关闭自动化交易功能
			closeStrategy: function() {
				if (this.getAuthority()) return
				this.prompt(this.msg[3], 2, () => this.changeFuncStatus(0))
			},
			// 开启自动化交易功能
			openStrategy: function() {
				if (this.getAuthority()) return
				uni.navigateTo({
					url: 'strategy-list/index?state=1'
				})
				// this.changeFuncStatus(1)
			},
			// 更改功能状态
			changeFuncStatus: function(type) {
				if (!this.loading) {
					this.loading = true
					uni.showLoading()
					changeAutoStatus({
						type
					}).then(res => {
						this.loading = false
						uni.hideLoading()
						let message = res.message
						if (res.code === 200) {
							message = `功能已${type?'开启':'关闭'}`
							this.init()
							// return ;
						}
						this.prompt(res.message)
					}).catch(err => {
						this.loading = false
						uni.hideLoading()
						this.prompt(err.message)
					})
				}
			},
			// 查看策略
			viewStrategy: function() {
				if (this.getAuthority()) return
				uni.navigateTo({
					url: './strategy-list/index?state=1'
				})
			},
			// 更改策略
			changeStrategy: function() {
				if (this.getAuthority()) return
				uni.navigateTo({
					url: './strategy-list/index?state=2'
				})
			},
			// 续签服务
			renewStrategy: function() {
				uni.navigateTo({
					url: './pay/index?type=renew'
				})
			},
			// 申请开启功能
			toApply: function() {
				if (this.state === 9) {
					this.prompt(this.msg[4])
				} else {
					uni.navigateTo({
						url: './trad-form/index'
					})

				}
			},
			// 判断操作权限
			getAuthority: function() {
				// 接口请求中
				if (this.loading) return true
				// 功能已过期
				if (this.state === 1 || this.state === 4 || this.state === 5) {
					let time = this.expireTime.replace(/-/g, '/')
					if (Date.parse(new Date()) > new Date(time).getTime()) {
						this.prompt(this.msg[0])
						return true
					}
				}
				// 功能已冻结
				if (this.state === 6) {
					this.prompt(this.msg[1])
					return true
				}
				return false
			},
			// 提示信息
			prompt: function(msg, type = 0, fn = null) { // msg 提示信息 type 0.仅提示 1.带确认 2.确认取消 fn 回调执行
				if (type) {
					uni.showModal({
						title: '温馨提醒',
						content: msg,
						showCancel: type === 1 ? false : true,
						success(res) {
							if (res.confirm) {
								fn && fn()
							}
						}
					})
				} else {
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;

		.f-cc {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.tool-list {
			display: flex;
			background-color: #FFFFFF;

			.tool-item {
				flex-direction: column;
				padding: 24rpx 0;
				flex: 1;
				border: 1px solid #DCDCDC;
				border-right-width: 0;

				&:last-child {
					border-right-width: 1px;
				}

				.item-img {
					width: 64rpx;
					height: 64rpx;
				}

				.tool-title {
					margin-top: 8rpx;
					font-weight: 600;
					font-size: 28rpx;
				}

				&:nth-child(2) {
					.tool-title {
						color: #828081;
					}
				}
			}
		}

		.route-list {
			margin-top: 40rpx;
			background-color: #FFFFFF;

			.route-item {
				height: 88rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #e6e2e3;

				&:last-child {
					border-bottom: none;
				}

				.item-left {
					display: flex;
					align-items: center;

					.left-icon {
						margin-right: 10rpx;
						font-size: 36rpx;
					}

					.left-name {
						color: #333;
						font-size: 30rpx;
						font-weight: 600;
						line-height: 1;
					}
				}

				.item-right {
					display: flex;
					align-items: center;
					color: #999;

					.right-icon {
						margin-left: 10rpx;
					}

					.right-name {
						text-align:right;
						line-height: 1;
						width: 370rpx;
						white-space: nowrap; 
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.tool-tips {
			margin-top: 40rpx;

			span {
				padding: 4rpx 16rpx 6rpx 16rpx;
				border-radius: 48rpx;
				color: #FFFFFF;
				background-color: #CCCCCC;
				font-size: 24rpx;
			}
		}

		.apply-box {
			height: 100vh;
			position: relative;
			background-size: 100% 100%;

			.apply-img {
				width: 750rpx;
				height: 980rpx;
			}

			.apply-btn {
				width: 360rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				border-radius: 40rpx;
				color: #FFFFFF;
				background-color: #1296DB;
				box-shadow: 4rpx 4rpx 6rpx 0 rgba(0, 0, 0, 0.3);
				position: absolute;
				left: 50%;
				bottom: 100rpx;
				transform: translate(-50%, 0);
			}
		}

		.wait-tips {
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 400rpx;
			height: 400rpx;
			border: 2px solid #1296DB;
			color: #1296DB;
			font-size: 48rpx;
			padding-top: 140rpx;
			border-radius: 200rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.apply-btn {
				width: 360rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 20rpx;
				text-align: center;
				position: absolute;
				left: 50%;
				top: 600rpx;
				transform: translate(-50%, 0);
				font-size: 28rpx;
				color: #ffffff;
				background-color: #1296DB;
			}
		}

		.confirm-tips {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-direction: column;
			height: 100%;
			padding: 120rpx 0;
			background-color: #ffffff;

			.confirm-tips-label {
				font-size: 36rpx;
				text-align: center;
				color: #666666;

				p {
					margin: 32rpx 0 16rpx 0;
					font-size: 48rpx;
					color: #18B566;
				}

				label {
					font-size: 28rpx;
					color: #999999;
				}
			}

			.confirm-tips-img {
				width: 560rpx;
				height: 560rpx;
			}

			.confirm-tips-btn {
				width: 560rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				text-align: center;
				color: #FFFFFF;
				background-color: #1296DB;
			}
		}

		.freeze-tips {
			position: absolute;
			left: 50%;
			bottom: 120rpx;
			transform: translate(-50%, -50%);
			padding: 4rpx 16rpx 6rpx 16rpx;
			color: #FFFFFF;
			background-color: #CCCCCC;
			white-space: nowrap;
			text-align: center;
		}

		.expire-time {
			position: absolute;
			left: 50%;
			bottom: 40rpx;
			transform: translate(-50%, 0);
			padding: 4rpx 16rpx 6rpx 16rpx;
			border-radius: 24px;
			color: #FFFFFF;
			background-color: #CCCCCC;
			font-size: 28rpx;
			white-space: nowrap;
		}
	}
</style>
